<template>
  <!-- 星座运势主入口 -->
  <div id="index_zodiac">
    <!-- 主界面 -->
    <transition name="fade">
      <Home v-if="show.home" />
    </transition>
    <!-- 详情界面 -->
    <transition name="fade">
      <Detail v-if="show.detail" :zodiac="zodiac" />
    </transition>
  </div>
</template>

<script>
import Detail from './Detail.vue'
import Home from './Home.vue'

import Pool from '../../module/zodiac/Pool.js'
import TheZodiac from '../../module/zodiac/TheZodiac.js'

export default {
  name: 'App',
  components: {
    Detail,
    Home,
  },

  data: function() {
    return {
      show: {
        home: false,
        detail: false,
      },
      // 星座
      zodiac: {},
      // 预测的运势
      predict: {},
      // 占卜池
      pool: {},

      // Detail动态样式
      // detailStyle: {
      //   height: '',
      // },
    }
  },

  created: function() {
    setTimeout(
      function() {
        this.init()
      }.bind(this),
      10
    )
  },

  methods: {
    /**
     * Init
     * 初始化
     *
     * @return void
     */
    async init() {
      this.handleShow('home')

      this.pool = new Pool()

      if (localStorage.getItem('pool') && this.isToday(localStorage.getItem('date'))) {
        // 如果缓存中有且日期是当天则获取缓存数据
        this.pool.init(JSON.parse(localStorage.getItem('pool')).list)
      } else {
        // 如果缓存中没有预测池更新预测池
        // 如果缓存中有但是日期不一样更新预测池
        await this.pool.update()
        localStorage.setItem('pool', JSON.stringify(this.pool))
        localStorage.setItem('date', new Date())
      }
    },

    /**
     * HandleShow
     * 操作-动态展示组件
     *
     * @param string  home  组件名
     * @param boolean flag  标志位
     *
     * @return null
     */
    handleShow: function(comp = 'home', flag = true) {
      switch (comp) {
        case 'home':
          this.show.home = flag
          break
        case 'detail':
          this.show.detail = flag
          break
        default:
      }
    },

    /**
     * HandleEnter
     * 进入详情界面
     *
     * @return void
     */
    handleEnter() {
      // 退出主界面
      this.handleShow('home', false)

      setTimeout(
        function() {
          // 获取当前星座信息
          this.zodiac = new TheZodiac().current()
          // 进入详情界面
          this.handleShow('detail')
        }.bind(this),
        1010
      )
    },

    /**
     * IsToday
     * 缓存中的日期是否是今天
     *
     * @param object date 日期数据
     *
     * @return boolean
     */
    isToday(date) {
      let today = new Date()
      return this.$moment(today).format('YYYYMMDD') === this.$moment(date).format('YYYYMMDD')
    },
  },
}
</script>

<style scoped media="screen" lang="less">
/* 效果类 */

/* 长度伸长 */
.stretch-enter {
  height: 0%;
}
.stretch-leave-to {
  height: 0%;
}
.stretch-enter-to {
  height: 100%;
}
.stretch-leave {
  height: 100%;
}
.stretch-enter-active {
  transition: all 1s;
}
.stretch-leave-active {
  transition: all 1s;
}

/* 渐入和滑出混合 */
.fade-enter {
  opacity: 0;
}
.fade-leave-to {
  opacity: 0;
}
.fade-enter-to {
  opacity: 1;
}
.fade-leave {
  opacity: 1;
}
.fade-enter-active {
  transition: all 1s;
}
.fade-leave-active {
  transition: all 1s;
}

/* 滑动特效 */

/* 右侧滑入滑出 */
/* 滑入前初始状态 */
.right-slider-enter {
  opacity: 0;
  transform: translateX(5rem) translateY(1rem) scale(0.8) rotate(10deg);
}
/* 滑出后结束状态 */
.right-slider-leave-to {
  opacity: 0;
  transform: translateX(5rem) translateY(1rem) scale(0.8) rotate(10deg);
}
/* 滑入后结束状态 */
.right-slider-enter-to {
  opacity: 1;
  transition-property: all;
  transition-duration: 1s;
  transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
/* 滑出前初始状态 */
.right-slider-leave {
  opacity: 1;
  transition-property: all;
  transition-duration: 1s;
  transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
/* 滑入持续时间 */
.right-slider-enter-active {
  transition: all 1s;
}
/* 滑出持续时间 */
.right-slider-leave-active {
  transition: all 1s;
}

/* 主节点 */
#index_zodiac {
  /* background: #11111c url('../../assets/星空.png') no-repeat fixed top; */
  /* background-size: cover; */
  width: 100%;
  height: 100%;
}
</style>
